import React, { useState, useEffect, useRef } from 'react'
import { useNavigate, useParams, useLocation, NavLink } from 'react-router-dom'
import { Button, Toast, Tabs, Swiper } from 'antd-mobile'
import { LeftOutline, RightOutline, FileOutline } from 'antd-mobile-icons'
import { SwiperRef } from 'antd-mobile/es/components/swiper'
import './order.scss'
import API from "../../api/order";
import { store } from '../../../store'
import Item from 'antd-mobile/es/components/dropdown/item'
import { IGoods } from '../../../interface'
import { useSelector,useDispatch } from 'react-redux'
import { SET_ORDER } from '../../../store/actionType'

const tabs = [
    {
        title: '全部',
        key: '1'
    },
    {
        title: '未支付',
        key: '2'
    },
    {
        title: '待送达',
        key: '3'
    },
    {
        title: '待评价',
        key: '4'
    },
    {
        title: '售后/退款',
        key: '5'
    },
]

function formatDateTime(dates: any) {
    let date = new Date(dates)
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    // m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    // d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    var minute = date.getMinutes();
    // minute = minute < 10 ? ('0' + minute) : minute;
    return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
    return y + '-' + m + '-' + d
};
export default function Order() {
    const navigate = useNavigate()
    const { _id, token } = store.getState().userReducer.user
    const [orderList, setOrderList] = useState([])
    const { orderReducer } = useSelector((state: any) => state)
    const swiperRef = useRef<SwiperRef>(null)
    const [activeIndex, setActiveIndex] = useState(orderReducer.orderTab)
    const dispatch = useDispatch()

    const getOrder = async () => {
        let res = await API['getOrder']({ token })
        console.log(res, '订单列表')
        setOrderList(res.data.data)
    }

    useEffect(() => {
        getOrder()
    }, [])

    const orderEdit = async (id:any) => {
        let res = await API['orderEdit']({ state: '待评价', token, id})
        console.log(res, '订单已完成')
        setTimeout(()=>{
            Toast.show({
                content: '订单已完成',
                position: 'top'
            })
            getOrder()
        },1500)
    }
    const orderDel = async (_id: any) => {
        let res = await API['orderDel']({ token, id: _id })
        console.log(res, '删除订单')
        Toast.show({
            content: '已删除订单',
            position: 'top'
        })
        getOrder()
    }
    
    return (
        <div className='order_my'>
            <div className='order_back'>
                <Button onClick={() => navigate(-1)}><LeftOutline /></Button>
                订单
            </div>
            <div className='order_nav'>
                <Tabs
                    activeKey={tabs[activeIndex].key}
                    onChange={key => {
                        const index = tabs.findIndex(item => item.key === key)
                        setActiveIndex(index)
                    }}
                >
                    {tabs.map(item => (
                        <Tabs.Tab title={item.title} key={item.key} />
                    ))}
                </Tabs>
            </div>
            <div className='order_main'>
                {
                    tabs[activeIndex].title == '全部' && orderList.map((ele: any) => (
                        <div key={ele._id} id={ele._id} className='my_order'>
                            <section><span>{formatDateTime(ele.pay_time)}</span><b>{ele.state == '未支付' ? '未支付' : (ele.state == '待送达' ? '待送达' : (ele.state == '待评价' ? '待评价' : ''))}</b></section>
                            <div className='order_goods'>{ele.goods.map((item1: IGoods) => <em key={item1._id}><img src={item1.img} alt="" /></em>)}</div>
                            <hgroup><span>单号：{ele.order_number}</span><span>共{ele.goods.length}件:<b>&yen;{ele.total}</b></span></hgroup>
                            {ele.state == '未支付' ? <aside><Button onClick={()=>(navigate('/pay'),dispatch({type:SET_ORDER,payload:{total:ele.total,order_id:ele._id}}))}>去支付</Button><Button color='danger' onClick={() => orderDel(ele._id)}>取消订单</Button> </aside> : (ele.state == '待送达' ? <aside><Button onClick={()=>orderEdit(ele._id)}>确认收货</Button><Button>查看订单</Button></aside> : (ele.state == '待评价' ? <aside><NavLink to={'/content'} state={ele}><Button>去评价</Button></NavLink></aside>:""))}
                        </div>
                    ))
                }
                {
                    orderList.filter((item: any) => item.state == tabs[activeIndex].title).length || tabs[activeIndex].title == '全部' ? orderList.filter((item: any) => item.state == tabs[activeIndex].title).map((ele: any) => (
                        <div key={ele._id} id={ele._id} className='my_order'>
                            <section><span>{formatDateTime(ele.pay_time)}</span><b>{ele.state == '未支付' ? '订单未支付' : (ele.state == '待送达' ? '订单待送达' : (ele.state == '待评价' ? '订单待评价' : ''))}</b></section>
                            <div className='order_goods'>{ele.goods.map((item1: IGoods) => <em key={item1._id}><img src={item1.img} alt="" /></em>)}</div>
                            <hgroup><span>单号：{ele.order_number}</span><span>共{ele.goods.length}件:<b>&yen;{ele.total}</b></span></hgroup>
                            {ele.state == '未支付' ? <aside><Button onClick={()=>(navigate('/pay'),dispatch({type:SET_ORDER,payload:{total:ele.total,order_id:ele._id}}))}>去支付</Button><Button color='danger' onClick={() => orderDel(ele._id)}>取消订单</Button> </aside> : (ele.state == '待送达' ? <aside><Button onClick={()=>orderEdit(ele._id)}>确认收货</Button><Button>查看订单</Button></aside> : (ele.state == '待评价' ? <aside><NavLink to={'/content'} state={ele}><Button>去评价</Button></NavLink></aside>:""))}
                        </div>
                    )) : <div className='noGoods'><i><FileOutline /></i>
                        <h1>还没有任何订单</h1>
                        <div className='order_go' onClick={() => {
                            navigate('/find')
                        }}>去逛逛</div></div>
                }
                <div className='noGoods'>

                    {/* <Swiper
                        direction='horizontal'
                        loop
                        indicator={() => null}
                        ref={swiperRef}
                        defaultIndex={activeIndex}
                        onIndexChange={index => {
                            setActiveIndex(index)
                        }}
                    >
                        <Swiper.Item>
                            
                        </Swiper.Item>
                        <Swiper.Item>
                            <i><FileOutline /></i>
                            <h1>还没有任何订单</h1>
                            <div className='order_go' onClick={() => {
                                navigate('/find')
                            }}>去逛逛</div>
                        </Swiper.Item>
                        <Swiper.Item>
                            <i><FileOutline /></i>
                            <h1>还没有任何订单</h1>
                            <div className='order_go' onClick={() => {
                                navigate('/find')
                            }}>去逛逛</div>
                        </Swiper.Item>
                        <Swiper.Item>
                            <i><FileOutline /></i>
                            <h1>还没有任何订单</h1>
                            <div className='order_go' onClick={() => {
                                navigate('/find')
                            }}>去逛逛</div>
                        </Swiper.Item>
                        <Swiper.Item>
                            <i><FileOutline /></i>
                            <h1>还没有任何订单</h1>
                            <div className='order_go' onClick={() => {
                                navigate('/find')
                            }}>去逛逛</div>
                        </Swiper.Item>
                    </Swiper> */}
                </div>
            </div>

        </div>
    )
}
